﻿<div class="container">
  <div class="block-header">
    <h2>Colors</h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <div class="card">
    <div class="card-header">
      <h2>Colors from Material Design <small>These colors  are inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors. (Taken by Google's color page)</small></h2>

      <ul class="actions">
        <li class="dropdown action-show" dropdown>
          <a href="" dropdown-toggle>
            <i class="zmdi zmdi-more-vert"></i>
          </a>

          <div class="dropdown-menu pull-right">
            <p class="p-20">
              You can put anything here
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div class="card-body card-padding">
      <div class="row">
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-red">
            <span class="color">Red</span>
            <span class="code">#F44336</span>
            <span class="less">@bgm-red</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-pink">
            <span class="color">Pink</span>
            <span class="code">#E91E63</span>
            <span class="less">@bgm-pink</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-purple">
            <span class="color">Purple</span>
            <span class="code">#9C27B0</span>
            <span class="less">@bgm-purple</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-deeppurple">
            <span class="color">Deep Purple</span>
            <span class="code">#673AB7</span>
            <span class="less">@bgm-deeppurple</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-indigo">
            <span class="color">Indigo</span>
            <span class="code">#3F51B5</span>
            <span class="less">@bgm-indigo</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-blue">
            <span class="color">Blue</span>
            <span class="code">#2196F3</span>
            <span class="less">@bgm-blue</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-lightblue">
            <span class="color">Light Blue</span>
            <span class="code">#03A9F4</span>
            <span class="less">@bgm-lightblue</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-cyan">
            <span class="color">Cyan</span>
            <span class="code">#00BCD4</span>
            <span class="less">@bgm-cyan</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-teal">
            <span class="color">Teal</span>
            <span class="code">#009688</span>
            <span class="less">@bgm-teal</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-green">
            <span class="color">Green</span>
            <span class="code">#4CAF50</span>
            <span class="less">@bgm-green</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-lightgreen">
            <span class="color">Light Green</span>
            <span class="code">#8BC34A</span>
            <span class="less">@bgm-lightgreen</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-lime">
            <span class="color">Lime</span>
            <span class="code">#CDDC39</span>
            <span class="less">@bgm-lime</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-yellow">
            <span class="color">Yellow</span>
            <span class="code">#FFEB3B</span>
            <span class="less">@bgm-yellow</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-amber">
            <span class="color">Amber</span>
            <span class="code">#FFC107</span>
            <span class="less">@bgm-amber</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-orange">
            <span class="color">Orange</span>
            <span class="code">#FF9800</span>
            <span class="less">@bgm-orange</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-deeporange">
            <span class="color">Deep Orange</span>
            <span class="code">#FF5722</span>
            <span class="less">@bgm-deeporange</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-brown">
            <span class="color">Brown</span>
            <span class="code">#795548</span>
            <span class="less">@bgm-brown</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-gray">
            <span class="color">Gray</span>
            <span class="code">#9E9E9E</span>
            <span class="less">@bgm-gray</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-bluegray">
            <span class="color">Blue Gray</span>
            <span class="code">#607D8B</span>
            <span class="less">@bgm-bluegray</span>
          </div>
        </div>
        <div class="col-sm-3 col-xs-6">
          <div class="color-block bgm-black">
            <span class="color">Black</span>
            <span class="code">#000000</span>
            <span class="less">@bgm-black</span>
          </div>
        </div>
      </div>
    </div>
  </div>


</div>
